본문으로 건너뛰기

05.25 일지

🎯 Flutter WebView 통신 이해하기​

Web Front → Moblie​

: JavaScriptChannel 이용

공식문서에 정보가 없어서 IDE에서 코드를 뜯어보기로 했다.
뜯어보는데 모르는게 끝도 없다보니 DFS처럼 되어버려서
구현코드 중 모르는 부분을 1~2계층만 들어가서 확인해보았다.

구현코드​

WebViewController()
    ..addJavaScriptChannel(
        "Toaster",
        onMessageReceived: (JavaScriptMessage message) {}
    )

JavaScriptChannel의 이름을 인자로 넘겨준다.
message 도착시 핸들러를 인자로 넘겨준다.

WebViewController 클래스​

WebViewController({
    void Function(WebViewPermissionRequest request)? onPermissionRequest,
    }) : this.fromPlatformCreationParams(
          const PlatformWebViewControllerCreationParams(),
          onPermissionRequest: onPermissionRequest,
        );

WebViewPermissionRequest: 웹뷰 사용에 허가요청
onPermissionRequest: 허가요청을 핸들링할 함수
this.fromPlatformCreationParams(): WebViewController 생성시 생성자로직, 플랫폼에 맞는 설정을 위해 만들어진 함수인 것 같다
PlatformWebCiewControllerCreationParams(): Flutter가 플랫폼(iOS, Android 등)에 맞는 ControllerCreation을 위한 매개변수를 담는 부분
onPermissionRequest: 허가요청을 핸들링할 함수는 플랫폼 독립적이므로 그대로 넘겨준다.
😞 ⇒ 핵심적인 로직을 이해할 순 없었지만 플랫폼에 맞게 설정을 달리하는 게 가장 윗계층에 있다는 것을 확인할 수 있었다.

addJavaScriptChannel() 메소드​

  Future<void> addJavaScriptChannel(
    String name, {
    required void Function(JavaScriptMessage) onMessageReceived,
  }) {
    assert(name.isNotEmpty);
    return platform.addJavaScriptChannel(JavaScriptChannelParams(
      name: name,
      onMessageReceived: onMessageReceived,
    ));
  }
  • JavaScriptChannel에 사용될 name과 JavaScriptMessage를 인자로 Message가 도착했을 때 핸들링할 로직을 인자로 받는다
  • name이 빈 스트링이면 Exception을 발생하게 assert()로 정의해준다(보아하니 name이 JavaScriptChannel의 id로 동작하게 된다)
  • platform.addJavaScriptChannel()을 통해서 플랫폼에 맞는 JavaScriptChannel을 등록한다.
    😞 ⇒ 핵심적인 로직을 이해할 순 없었지만 플랫폼에 맞게 설정을 달리하는 게 가장 윗계층에 있다는 것을 확인할 수 있었다.

JavaScriptMessage 클래스​

@immutable
class JavaScriptMessage{
  const JavaScriptMessage({
    required this.message,
  });

  final String message;
}

@immutable: 변경될 수 없는 값임을 명시
message: JavaScript 쪽에서 전해져오는 메시지

😞 ⇒ JavaScriptMessage의 특성만 알 수 있었다.


⇒ 라이브러리를 처음 까보는데 내부 로직이 어디 써있는지 확인하는 요령이 필요한 것 같다..

Mobile → Web Front​

: controller.runJavaScript() 사용

구현코드​

static void sendDeviceToken(String token){
    controller.runJavaScript('window.reactGetToken($token)');
}

runJavaScript('JS_CODE')로 Front 쪽에서 JS_CODE로 실행이 가능하다.

내가 알고싶은 '로직'을 확인하려면?​

😀 ⇒ 공식문서는 없으니 깃허브 레포를 fork해서 코드를 뜯어보자